<%--
  Created by IntelliJ IDEA.
  User: zzz
  Date: 2020/2/4
  Time: 15:45
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
</head>
<body>
<div class="card">
    <div  class="card-body">
        <h5 class="card-title"><span>商品详情图</span>  <button style="margin-left: 10px;" onclick="setDetail()" type="button" class="btn btn-info bt-sm" data-toggle="modal" data-target="#detail"><i class="fa fa-cloud-upload"></i></button></h5>
        <div id="myDetail" style="margin: 0 auto;"></div>
    </div>
</div>


<div class="modal fade bd-example-modal-xl" id="detail" tabindex="-1" role="dialog" aria-labelledby="detailTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="detailTitle">添加商品详情图</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true" onclick="insertDetail()">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <label class="col-form-label">请上传商品详情图:</label>
                <form action="${APP_PATH}/detail/detailUpload" class="dropzone"></form>
            </div>
            <div class="modal-footer">
                <button onclick="insertDetail()" type="button" class="btn btn-primary" data-dismiss="modal">ojbk</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>

<script>

    function insertDetail() {
        var f;
        f = $("#detail").find(".dz-image").html();
        if(f != undefined){
            $.ajax({
                url : "${APP_PATH}/detail/insertDetail",
                method : "POST",
                data : {
                    fid : ${requestScope.furniture.fid}
                },
                success : function (result) {
                    if(result.success){
                        swal("上传成功！", {icon: "success"}).then((value) => {
                            myDropzone.removeAllFiles();
                        getDetailList();
                    });
                    }else{
                        swal("上传失败！", {icon: "error"});
                    }
                }
            });
        }
    }

    function deleteDetail(did) {
        $.ajax({
            url : "${APP_PATH}/detail/deleteDetail/"+did,
            method : "POST",
            data : {
                _method : "DELETE",
                fid : ${requestScope.furniture.fid},
                did : did
            },
            success : function () {
                getDetailList();
            }
        });
    }

    function getDetailList() {
        $.ajax({
            url : "${APP_PATH}/furniture/getFurnitureDetail",
            method : "POST",
            data : {
                fid : ${requestScope.furniture.fid}
            },
            beforeSend : function () {
                var detailContent = "";
                detailContent += '<div style="margin: auto 0; margin-left: 555px;" class="spinner-grow text-info" role="status">';
                detailContent += '<span class="sr-only"></span>';
                detailContent += '</div>';
                $("#myDetail").html(detailContent);
            },
            success : function (result) {
                if(result.success){
                    var detailList = result.data.detailList;
                    var detailContent = "";
                    if(detailList.length == 0){
                        detailContent += '<div style="margin : 0 auto;  margin-left: 445px;"><img style="width: 266px;" src="${APP_PATH}/img/nodata4.png" class="img-fluid" alt="..."></div>';
                    }else if(detailList.length > 0 && detailList.length <= 4){
                        $("#myDetail").css("width","1200px");
                        for(var i = 0; i < detailList.length; i++){
                            detailContent += '<div  style="float:left; margin-right: 30px; ">';
                            detailContent += '<img style="width: 266px;" src="${APP_PATH}/'+detailList[i].dphoto+'" class="img-fluid" alt="...">';
                            detailContent += '<button onclick="deleteDetail('+detailList[i].did+')" style="position: absolute; margin-left: -45px; z-index: 100;" type="button"  class="btn btn-danger btn-square delete"><i class="ti-trash"></i></button>';
                            detailContent += '</div>';
                        }
                    }else {
                        $("#myDetail").css("width","");
                        detailContent += '<div class="swiper-container swiper-Detail">';
                        detailContent += '<div id="detailList" class="swiper-wrapper">';
                        for(var i = 0; i < detailList.length; i++){
                            detailContent += '<div class="swiper-slide">';
                            detailContent += '<button onclick="deleteDetail('+detailList[i].did+')" style="position: absolute; left: 220px; z-index: 100;" type="button"  class="btn  btn-danger btn-square  delete"><i class="ti-trash"></i></button>';
                            detailContent += '<img style="width: 266px;" src="${APP_PATH}/'+detailList[i].dphoto+'" class="img-fluid" alt="...">';
                            detailContent += '</div>';
                        }
                        detailContent += '</div>';
                        detailContent += '<div class="swiper-button-prev"></div>';
                        detailContent += '<div class="swiper-button-next"></div>';
                        detailContent += '</div>';
                    }
                    $("#myDetail").html(detailContent);
                    swiperRender();
                }
            },
            complete : function () {
                getFurnitureDetail();
            }
        });
    }
</script>
